import React, { Component } from 'react'
import './index.css';
export default class Header extends Component {

    state = {
        msg: ''
    }

    render() {
        return (
            <div className="todo-header">
                <input type="text" placeholder="请输入你的任务名称，按回车键确认" 
                    value={this.state.msg} 
                    onChange={this.change}
                    onKeyDown={this.addTodo}
                />
            </div>
        )
    }

    change = (e) => {
        this.setState({
            msg: e.target.value
        })   
    }

    addTodo = (e) => {
        if(e.keyCode===13){
            //新增任务
            this.props.addTodo(this.state.msg);
            //清空
            this.setState({
                msg: ''
            })
        }
    }
}
